<template>
	<view class="container">
		<view class="lists">
			<view v-if="datas.length == 0">
				<emptyPage :title="$t(`暂无拨打记录~`)"></emptyPage>
			</view>
			<view class="item" v-for="n in datas" @longpress="delEvent(n)" @click="gotoDetail(n)">
				<view class="top-bg">
					<text class="dept">申请时间：{{n.created_time}}</text>
					<text class="status" v-if="n.status == 0">审核中</text>
					<text class="status" v-if="n.status == 1">已通过</text>
					<text class="status" v-if="n.status == 2">已拒绝</text>
					<text class="status" v-if="n.status == 3">已过期</text>
				</view>
				<view class="content">
					<view class="c-left">
						<image class="avatar" src="../../static/images/kd.png"></image>
					</view>
					<view class="c-right">
						<view class="cr-top">
							<view class="name">{{n.name}}</view>
							<view class="title">{{n.address}}</view>
							<view class="title">{{n.phone}}</view>
						</view>
						<view class="cr-bottom">
							加入时间：{{n.join_time}}
						</view>
					</view>
				</view>
			</view><!--item end-->
			
		</view><!--lists end-->
	</view>
</template>

<script>
	import {user_brand_request_list,user_brand_del} from "@/api/platform.js";
	import emptyPage from '@/components/emptyPage';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				datas:[],//推荐门店
				operationing:false,
				page:1,
				limit:10, 
				hasMore:true,
			}
		},
		onLoad(options) {
			this.getData();
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			this.page = 1;
			this.hasMore = true;
			this.getData();
		},
		onReachBottom() {
			if(this.hasMore){
				this.page++;
				this.getData();
			}
		},
		methods: {
			gotoDetail(n){
				uni.navigateTo({
					url:'/pages/broad/detail?created_time='+n.created_time+'&name='+n.name+"&address="+n.address+"&phone="+n.phone+"&status="+n.status+"&reason="+n.reason+"&join_time="+n.join_time+"&audi_time="+n.audi_time+"&start_time="+n.start_time+"&end_time="+n.end_time
				})
			},
			gotoTemp(){
				uni.navigateTo({
					url:'/pages/users/tecer/project/add'
				})
			},
			//选择模板
			seleTemp(data){
				
			},
			delEvent(n){
				if(n.status == 1){
					return;
				}
				if(this.operationing){
					return;
				}
				
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定删除？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							user_brand_del(n.id).then(res => {;
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									that.getData();
									uni.showToast({
										icon:'success',
										title:res.msg
									})
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				}); 
			},
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				user_brand_request_list({page:that.page,limit:that.limit}).then((res) => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					let data = res.data;
					 console.info(data);
					 if(that.page > 1){
						 that.datas.concat(data.list);
					 }else{
						 that.datas = data.list;
					 }
					 if(data.list.length == that.limit){
						 that.hasMore = true;
					 }else{
						 that.hasMore = false;
					 }
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.lists{
			display: flex;
			flex-direction: column;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-top: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
			.item{
				background-color: #FFFFFF;
				border-radius: 12rpx;
				display: flex; 
				flex-direction: column;
				padding: 20rpx;
				margin-bottom: 20rpx;
				box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
				.top-bg{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #F0F0F0;
					padding-bottom: 20rpx;
					.dept{
						font-size: 28rpx;
						font-weight: bold;
						color: #808080;
					}
					.status{
						font-size: 26rpx;
						// background-color: #366092;
						color: #606266;
						width: 80rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 20rpx;
					}
				}
				.content{
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;
					.c-left{
						
						.avatar{
							width: 120rpx;
							height:120rpx;
							border-radius: 12rpx;
						}
					}
					.c-right{
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						.cr-top{
							.name{
								font-size: 28rpx;
								font-weight: bold;
							}
							.title{
								font-size: 26rpx;
								color: #3d3d3d;
								margin-top: 5rpx;
							} 
						}
						.cr-bottom{
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #8F939C;
						}
					}
				}
			}//item end
		}//lists end
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
	
</style>
